<template>
  <a-layout class="basic-layout">
    <!-- 顶部导航栏 -->
    <GlobalHeader />

    <!-- 主要内容区域 -->
    <a-layout-content :class="['main-content', { 'fullscreen-content': isFullscreenPage }]">
      <router-view />
    </a-layout-content>

    <!-- 底部版权信息 -->
    <GlobalFooter />
  </a-layout>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import GlobalHeader from '@/components/GlobalHeader.vue'
import GlobalFooter from '@/components/GlobalFooter.vue'

const route = useRoute()

// 检测是否需要全屏内容区域
const isFullscreenPage = computed(() => {
  return route.path === '/' || route.path.startsWith('/app/chat/')
})
</script>

<style scoped>
.basic-layout {
  background: none;
}

.main-content {
  padding: 24px;
  background: white;
  margin: 16px auto 56px;
}

/* 主页全屏样式 */
.main-content.fullscreen-content {
  padding: 0;
  margin: 0;
  background: none;
  height: calc(100vh - 64px); /* 减去header的高度，footer是fixed不占用空间 */
  overflow-y: auto;
}
</style>
